<template>
    <el-container>
        <el-header>登录</el-header>
        <el-main>
            <el-form ref="form" label-position="top" label-width="80px" label-suffix="：" :model="form" :rules="rule">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="form.password" type="password"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submit" :disabled="buttonLock">登录</el-button>
                </el-form-item>
            </el-form>
        </el-main>
        <el-footer></el-footer>
    </el-container>
</template>

<script>
    import userApi from './api/userApi'

    export default {
        name: 'add',
        data: function () {
            return {
                buttonLock: false,
                form: {
                    username: '',
                    password: ''
                },
                rule: {
                    username: [
                        {required: true, message: '不能为空', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '不能为空', trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            goBack() {
                this.$router.push({path: "/list"})
            },
            submit() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        // 验证通过，提交数据
                        this.buttonLock = true
                        const postData = this.form
                        userApi.login(postData).then(response => {
                            this.buttonLock = false
                            if(response.data.code === 200){
                                this.$router.push({path: "/manage"})
                            }
                        })
                    }
                })
            }
        }
    }
</script>

<style>

</style>
